{% extends "base.html" %}
{% block content %}
<div class="max-w-3xl mx-auto py-8">
  <h1 class="text-2xl font-semibold mb-6">{{ _('确认订单') }}</h1>

  <form method="post">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="border rounded-lg p-4 mb-6">
      <h2 class="font-medium mb-3">{{ _('商品信息') }}</h2>
      <div class="flex items-center gap-4">
        {% if p.cover_url %}
          <img src="{{ p.cover_url }}" class="w-20 h-20 object-cover rounded" alt="{{ p.title }}">
        {% endif %}
        <div>
          <div class="font-semibold">{{ p.t('title', get_locale()|string) or p.title }}</div>
          <div class="text-sm text-slate-500">
            {{ _('数量') }}：
            <input type="number" name="qty" value="{{ qty }}" min="1"
                   class="w-20 border rounded px-2 py-1 text-sm">
          </div>
          <div class="mt-1 text-emerald-700 font-semibold">
            {{ _('价格') }}：{{ '%.2f'|format(display_amount) }} {{ p.currency or 'USD' }}
          </div>
        </div>
      </div>
    </div>

    <div class="border rounded-lg p-4 mb-6">
      <h2 class="font-medium mb-3">{{ _('收件信息') }}</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <label class="block text-sm text-slate-600 mb-1">{{ _('收件人姓名') }}</label>
          <input type="text"
                 name="recipient_name"
                 value="{{ recipient.name }}"
                 class="w-full border rounded px-3 py-2 text-sm">
        </div>
        <div>
          <label class="block text-sm text-slate-600 mb-1">{{ _('邮箱') }}</label>
          <input type="email"
                 name="recipient_email"
                 value="{{ recipient.email }}"
                 class="w-full border rounded px-3 py-2 text-sm">
        </div>
        <div>
          <label class="block text-sm text-slate-600 mb-1">{{ _('电话') }}</label>
          <input type="text"
                 name="recipient_phone"
                 value="{{ recipient.phone }}"
                 class="w-full border rounded px-3 py-2 text-sm">
        </div>
        <div class="md:col-span-2">
          <label class="block text-sm text-slate-600 mb-1">{{ _('收货地址') }}</label>
          <textarea name="recipient_address" rows="2"
                    class="w-full border rounded px-3 py-2 text-sm">{{ recipient.address }}</textarea>
        </div>
        <div class="mt-4">
          <label class="block text-sm font-medium text-gray-700">
            {{ _('邮编') }}
          </label>
          <input
            type="text"
            name="recipient_postal_code"
            value="{{ recipient.postal_code }}"
            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
            required
          >
        </div>
        <div class="md:col-span-2">
          <label class="block text-sm text-slate-600 mb-1">{{ _('备注') }}</label>
          <textarea name="remark" rows="2"
                    class="w-full border rounded px-3 py-2 text-sm"></textarea>
        </div>
      </div>
    </div>

    <div class="flex items-center justify-between">
      <a href="{{ url_for('front.product_detail', pid=p.id) }}"
         class="text-sm text-slate-500 hover:text-slate-700">
        ← {{ _('返回商品页') }}
      </a>
      <button type="submit"
              class="px-4 py-2 rounded border border-emerald-600 text-emerald-700 hover:bg-emerald-50">
        {{ _('提交订单并去支付') }}
      </button>
    </div>
  </form>
</div>

<script>
document.getElementById('checkout-form').addEventListener('submit', function (e) {
    let form = e.target;
    let valid = true;
    let errors = [];

    const name = form.recipient_name.value.trim();
    const email = form.recipient_email.value.trim();
    const phone = form.recipient_phone.value.trim();
    const address = form.recipient_address.value.trim();
    const postal = form.recipient_postal_code.value.trim();

    // 邮箱格式验证
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    // 国际手机号（+ 国码 或 普通数字）
    const phoneRegex = /^[0-9+\-\s()]{6,20}$/;

    // 校验规则
    if (!name) { valid = false; errors.push("请填写姓名"); }
    if (!emailRegex.test(email)) { valid = false; errors.push("请填写正确的邮箱格式"); }
    if (!phoneRegex.test(phone)) { valid = false; errors.push("请填写正确的联系电话"); }
    if (!address) { valid = false; errors.push("请填写收货地址"); }
    if (!postal) { valid = false; errors.push("请填写邮编"); }

    if (!valid) {
        e.preventDefault();

        alert("请检查以下错误：\n\n" + errors.join("\n"));

        // 自动滚到第一个错误的输入框
        const firstInput = form.querySelector('input:invalid, textarea:invalid');
        if (firstInput) {
            firstInput.scrollIntoView({ behavior: 'smooth', block: 'center' });
            firstInput.focus();
        }
    }
});
</script>
{% endblock %}
